<template>
	<view class="contents">
		<view class="" style="height: 28rpx;"></view>
		<view class="search">
			<input type="text" placeholder="输入昵称或手机号" @input="doInput" v-model="kw">
		</view>
		<view class="promote_data">
			<view class="left">
				<view class="dname">
					推广人数
				</view>
				<view class="dnum">
					{{mypromotion.one_spread_count}}
				</view>
			</view>
			<view class="fengexian">

			</view>
			<view class="right">
				<view class="dname">
					直推订单
				</view>
				<view class="dnum">
					{{mypromotion.order_count}}
				</view>
			</view>
		</view>
		<view class="promote_information">
			<view class="promoter">
				推广人信息
			</view>
			<view class="promote_order">
				订单数/金额
			</view>
		</view>
		<view class="promote_information1" v-for="(item,i) in promotersLists" :key="i">
			<view class="promoter1">
				{{item.nickname}}
			</view>
			<view class="promote_order1">
				{{item.sellout_money}}
			</view>
		</view>
		<!-- 	<view class="bottombtn">
			<view class="personnel_management">
				人员管理
			</view>
			<view class="extension_workers">
				推广人员
			</view>
		</view> -->
		<view class="footer" v-if="promotersLists.length==0">
			暂无相关推广数据
		</view>
	</view>
</template>

<script>
	import {
		myPromotion,
		acquiringPromoter
	} from '@/api/api.js'
	export default {
		data() {
			return {
				mypromotion: {},
				promotersLists: [],
				kw: '',
				timer: ''

			}
		},
		onLoad() {
			this.init(),
				this.acqPromoter()
		},


		methods: {
			// 获取推广人数和订单
			init() {
				myPromotion().then(res => {
					if (res.data.code == '200') {
						this.mypromotion = res.data.data.data
					} else {}
				})
			},
			// 获取推广人信息列表
			acqPromoter() {
				let data = `page=1&limit=16&search=`
				acquiringPromoter(data).then(res => {
					console.log(res)
					if (res.data.code == '200') {
						this.promotersLists = res.data.data.list
					} else {}
					// console.log(this.promotersLists)
				})
			},
			doInput() {
				uni.showLoading({
					title:'搜索ing'
				})
				if (this.timer) {
					clearTimeout(this.timer) //清除掉尚未执行的定时器任务
					this.timer = null
				}
				let kw = this.kw.trim()
				if (!kw) {
					uni.hideLoading()
					this.acqPromoter()
					return
				}
				//创建新的定时器任务
				this.timer = setTimeout(() => {
					let data = `page=1&limit=10&search=${kw}`
					acquiringPromoter(data).then(res => {
						uni.hideLoading()
						console.log(res)
						if (res.data.code == '200') {
							this.promotersLists = res.data.data.list
						} else {}
						// console.log(this.promotersLists)
					})
				}, 1000)
			},

		}
	}
</script>

<style lang="scss">
	.contents {
		width: 100%;
		min-height: 100vh;
		background-color: rgb(247, 249, 252);
		background-image: linear-gradient(180deg, #1AB374 100rpx, #F7F9FC 300rpx);

		.search {
			input {
				width: 620rpx;
				height: 60rpx;
				background-color: #fff;
				border-radius: 60rpx;
				margin: auto;
				text-align: center;
			}

		}

		.promote_data {
			width: 694rpx;
			margin: 30rpx auto;
			// padding: 20rpx auto;
			background-color: #fff;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left,
			.right {
				text-align: center;
				width: 50%;
				height: 120rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.dname {
					color: #999;
					font-size: 26rpx;
				}

				.dnum {
					font-weight: 600;
					font-size: 36rpx;
				}
			}

			.fengexian {
				width: 1px;
				height: 50rpx;
				background-color: #999;
			}
		}

		.promote_information {
			font-size: 28rpx;
			font-weight: 600;
			// border-bottom: 2rpx solid #000;
			color: #999;
			margin-top: 30rpx;
			padding-top: 24rpx;
			padding-bottom: 24rpx;
			background-color: #fff;
			width: 100vw;
			display: flex;
			justify-content: space-between;

			.promoter,
			.promote_order {
				padding: 20rpx auto;
				width: 50%;
				text-align: center;
			}

		}

		.promote_information1 {
			font-size: 28rpx;
			color: #000;
			// border-bottom: 1rpx solid gray;
			margin-bottom: 4rpx;
			padding-top: 24rpx;
			padding-bottom: 24rpx;
			background-color: #fff;
			width: 100vw;
			display: flex;
			justify-content: space-between;

			.promoter1,
			.promote_order1 {
				padding: 20rpx auto;
				width: 50%;
				text-align: center;
			}
		}

		.bottombtn {
			box-sizing: border-box;
			width: 100vw;
			background-color: #fff;
			padding: 24rpx 28rpx;
			display: flex;
			justify-content: space-between;
			position: fixed;
			bottom: 28rpx;

			>view {
				height: 64rpx;
				line-height: 64rpx;
				width: 46%;
				border-radius: 50rpx;
				text-align: center;
			}

			.personnel_management {
				border: 1rpx solid #1AB374;
				color: #1AB374;
			}

			.extension_workers {
				background-color: #1AB374;
				color: #fff;
			}
		}

		.footer {
			color: #999;
			font-size: 28rpx;
			height: 100rpx;
			margin-top: 28rpx;
			text-align: center;
		}
	}
</style>
